import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// 引入
import Home from './components/Home';
import Header from './components/Header';
import Footer from './components/Footer';
import Button from './components/Button';
class App extends Component {
  constructor () {
    super()
    this.state = {
      initAge: 0,
      inputAppText: ''
    }
  }
  
  handleFooter (res) {
    console.log('call back',res);
    this.setState({
      initAge: res
    });
  }

  handleCBB (res) {
    this.setState({
      inputAppText: res
    });
  }
  render() {
    const friends = {
      name: '好友',
      friends: [
        'Lili','Jack Ma','Robin Li'
      ]
    }
    return (
      // <div className="container">
      //   <div className="row">
      //     <div className="col-xs-1 col-xs-offset-11">
      //       <Home></Home>
      //     </div>
      //   </div>
      // </div>

      // <div>
      //   <Home />
      // </div>
      // <Home />
      <div className="container">
        <div className="row">
          {/* 无状态组件 */}
          <Header age={this.state.initAge} infor={this.state.inputAppText}></Header>
        </div>
        <div className="row">
          <Home pcname={'MacBook'} pclmz={18} pf={friends}>
            <p>I'm children</p>
          </Home>
        </div>
        <div className="row">
          <Footer pcage={20} callback={this.handleFooter.bind(this)}></Footer>
        </div>
        <div className="row">
          <Button cbApp={this.handleCBB.bind(this)}></Button>
        </div>
      </div>
    );
  }
}

export default App;
